<template>
  <div>
    <div class="common-card mt20">
      <dc-cell title="支付方式分布" class="main-title"></dc-cell>
      <div class="common-chart" id="payring"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col span="7" class="text-left">支付方式</dc-col>
        <dc-col span="7">实际收入</dc-col>
        <dc-col span="6">占比</dc-col>
      </dc-row>
      <dc-row v-for="(item, index) in payRank" :key="item.paymentName" class="bg-white echarts-list-data" type="flex" justify="space-around">
        <dc-col span="7" class="text-left ellipsis" >
          <span class="point" :style="{background: colors[index]}"></span>
          {{item.paymentName}}
        </dc-col>
        <dc-col span="7">{{item.businessTurnover}}</dc-col>
        <dc-col span="6">{{item.percentage}}%</dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20">
      <dc-cell title="销售来源占比" class="main-title"></dc-cell>
      <div class="common-chart" id="salering"></div>
      <dc-row class="echarts-list-header" type="flex" justify="space-around">
        <dc-col span="5" class="text-left">销售来源</dc-col>
        <dc-col span="5">客单数</dc-col>
        <dc-col span="5">营业额</dc-col>
        <dc-col span="5">占比</dc-col>
      </dc-row>
      <dc-row v-for="(item, index) in saleRank" :key="item.saleSource" class="bg-white echarts-list-data" type="flex" justify="space-around">
        <dc-col span="5" class="text-left ellipsis">
          <span class="point" :style="{background: colors[index]}"></span>
          {{item.saleSource}}
        </dc-col>
        <dc-col span="5">{{item.orderNumber}}</dc-col>
        <dc-col span="5">{{item.businessTurnover}}</dc-col>
        <dc-col span="5">{{item.percentage}}%</dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20">
      <dc-cell title="不同市别营业额对比" class="main-title"></dc-cell>
      <div class="common-chart" id="periodcolumn"></div>
    </div>
    <div class="common-card mt20">
      <dc-cell title="优惠构成" class="main-title"></dc-cell>
      <div class="common-chart" id="discpie"></div>
    </div>
  </div>
</template>

<script>
  import {initColumn} from '@/common/echarts/column';
  import {initPie} from '@/common/echarts/pie';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  import api from '@/common/api/bsAnalysis';
  import colors from '@/common/echarts/theme.json';
  export default {
    components: {
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    },
    props: {
      timeFlag: [String, Number],
      beginTime: Number,
      endTime: Number
    },
    data () {
      return {
        periodData: {
          x: ['暂无数据'],
          y: ['0']
        },
        payRank: [],
        saleRank: [],
        payData: [{value: 0, name: '暂无数据', tip: 0}],
        sourceData: [{value: 0, name: '暂无数据', tip: 0}],
        discData: [{value: 0, name: '暂无数据', tip: 0}],
        payPie: null,
        salePie: null,
        discPie: null,
        Marketcolumn: null,
        colors: colors.color
      };
    },
    watch: {
      beginTime () {
        this.dataInit();
        this.buildChart();
      }
    },
    methods: {
      //重新生成所有图表
      buildChart () {
        let data = {
          timeFlag: this.timeFlag,
          beginTime: this.beginTime,
          endTime: this.endTime
        };
        this._getPaymentType(data);
        this._getDiscount(data);
        this._getMarket(data);
        this._getSalesource(data);
      },
      dataInit () {
        this.periodData = {x: ['暂无数据'], y: ['0']};
        this.payData = [{value: 0, name: '暂无数据', tip: 0}];
        this.sourceData = [{value: 0, name: '暂无数据', tip: 0}];
        this.discData = [{value: 0, name: '暂无数据'}];
        this.payRank = [];
        this.saleRank = [];
        this.initPayPie();
        this.initSalePie();
        this.initPeriodColumn();
        this.initDiscPie();
      },
      _getPaymentType (data) {       //获取支付方式分布
        api.getPaymentType(data)
          .then(res => {
            if (res && res.length > 0) {
              this.payRank = res;
              this.payData = [];
              let self = this;
              res.forEach(function (item) {
                item.percentage = item.percentage.replace(',', '');
                self.payData.push({value: item.percentage, name: item.paymentName, tip: item.businessTurnover});
              });
              this.initPayPie();
            }
          });
      },
      _getSalesource (data) {        //获取销售来源占比(按日)
        api.getSalesource(data)
          .then(res => {
            if (res && res.length > 0) {
              this.saleRank = res;
              this.sourceData = [];
              let self = this;
              res.forEach(function (item) {
                item.percentage = item.percentage.replace(',', '');
                self.sourceData.push({value: item.percentage, name: item.saleSource, tip: item.businessTurnover});
              });
              this.initSalePie();
            }
          });
      },
      _getMarket (data) {        //获取不同市别营业额占比(按日)
        api.getMarket(data)
          .then(res => {
            if (res && res.length > 0) {
              this.periodData.x = [];
              this.periodData.y = [];
              let self = this;
              res.forEach(function (item) {
                item.businessTurnover = item.businessTurnover.replace(',', '');
                self.periodData.x.push(item.marketName);
                self.periodData.y.push(item.businessTurnover);
              });
              this.initPeriodColumn();
            }
          });
      },
      _getDiscount (data) {        //获取优惠构成(按日)
        api.getDiscount(data)
          .then(res => {
            if (res && res.length > 0) {
              this.discData = [];
              let self = this;
              res.forEach(function (item) {
                item.businessTurnover = item.businessTurnover.replace(',', '');
                self.discData.push({value: item.businessTurnover, name: item.discountWay});
              });
              this.initDiscPie();
            }
          });
      },
      //不同市别营业额对比
      initPeriodColumn () {
        this.Marketcolumn.hideLoading();
        this.Marketcolumn.setOption({
          color: ['#78ACF2'],
          xAxis: [
            {
              type: 'category',
              data: this.periodData.x
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '折前合计'
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '60%',
              data: this.periodData.y
            }
          ]
        });
      },
      //支付方式分布(按日)
      initPayPie () {
        this.payPie.hideLoading();
        this.payPie.setOption({
          title: [{
            text: this.payData[0].name,
            textStyle: {
              width: 4,
              verticalAlign: 'top',
              color: '#999',
              fontWeight: 'normal',
              fontSize: 14
            },
            x: 'center',
            y: '50%'
          }, {
            text: this.payData[0].value + '%',
            textStyle: {
              verticalAlign: 'top',
              color: '#333',
              fontWeight: 'bold',
              fontSize: 20
            },
            x: 'center',
            y: '42%'
          }],
          tooltip: {
            formatter: function (params) {
              return params.name + ': ' + params.data.tip + '(' + params.value + '%)';
            }
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '',
            radius: ['40%', '55%'],
            data: this.payData
          }]
        });
      },
      //销售来源占比
      initSalePie () {
        this.salePie.hideLoading();
        this.salePie.setOption({
          title: [{
            text: this.sourceData[0].name,
            textStyle: {
              width: 4,
              verticalAlign: 'top',
              color: '#999',
              fontWeight: 'normal',
              fontSize: 14
            },
            x: 'center',
            y: '50%'
          }, {
            text: this.sourceData[0].value + '%',
            textStyle: {
              verticalAlign: 'top',
              color: '#333',
              fontWeight: 'bold',
              fontSize: 20
            },
            x: 'center',
            y: '42%'
          }],
          tooltip: {
            formatter: function (params) {
              return params.name + ': ' + params.data.tip + '(' + params.value + '%)';
            }
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '',
            radius: ['40%', '55%'],
            data: this.sourceData
          }]
        });
      },
      //优惠构成
      initDiscPie () {
        this.discPie.hideLoading();
        this.discPie.setOption({
          series: [{
            // 根据名字对应到相应的系列
            name: '',
            type: 'pie',
            label: {
              normal: {
                formatter: '{b} \n {d}%'
              }
            },
            data: this.discData
          }]
        });
      }
    },
    mounted () {
      this.Marketcolumn = initColumn('#periodcolumn');
      this.payPie = initPie('#payring');
      this.salePie = initPie('#salering');
      this.discPie = initPie('#discpie');
      this.initPayPie();
      this.initSalePie();
      this.initPeriodColumn();
      this.initDiscPie();
    },
    activated () {
      console.log('activ');
      this.dataInit();
      this.buildChart();
    },
    created () {
      this.buildChart();
    }
  };
</script>

<style lang="scss" scoped>
</style>
